/*
 * @Author: mikey.zhaopeng 
 * @Date: 2018-05-19 10:19:45 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-12 15:31:27
 */
<template>
  <el-row class="mySelTime" style="padding:10px;width: 100%;">
    <!-- 城市 -->
      <el-select v-model="value" style="width:100px" @change="cityChange">
        <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        </el-option>
     </el-select>
     <!-- 区域 -->
     <el-select v-model="areaDefault" @change="onChangeArea" style="width:100px">
        <el-option
        v-for="item in areaArr"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
     </el-select>
     <!-- 门店 -->
     <el-select v-model="storeDefault" @change="onChangeStore" style="width:100px">
        <el-option
        v-for="item in storeArr"
        :key="item.id"
        :label="item.name"
        :value="item.id">
        </el-option>
     </el-select>
    <div class="dateScope" style="display:inline">
      <el-date-picker
      @change="changeTime"
      v-model="gTime"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
    </div>
  </el-row>
</template>
<script>
import { GetAllArea, GetAllStoreByAreaId } from "@/api/flh/home";
export default {
  props: {
    val: String, // 显示几个select
    districtId: String, // 区域id
    storeId: String // 门店id
  },
  computed: {
    checkState() {}
  },
  data() {
    return {
      showCity: false,
      showArea: false,
      showStore: false,
      cityDisabled: false, // 城市是否禁用
      areaDisabled: false, // 区域
      storeDisabled: false, // 门店
      value: 36001,
      gTime: [],
      options: [
        {
          value: 36001,
          label: "洛阳市"
        },
        {
          value: 36002,
          label: "郑州市"
        }],
      areaDefault: "",
      areaArr: [],
      storeDefault: "",
      storeArr: [{ id: "", name: "全部" }], // 门店
      screenObj: {
        // 返回给父组件的数据
        gTime: [],
        city: {
          name: "",
          id: ""
        },
        area: {
          name: "",
          id: ""
        },
        store: {
          name: "",
          id: ""
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    storeId(res) {
      this.onChangeStore(res);
    }
  },
  methods: {
    // 获取门店
    async fetchStore() {
      var params = {
        areaId: this.screenObj.area.id,
        cityId: this.value
      };
      try {
        var res = await GetAllStoreByAreaId(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var oneData = [{ id: "", name: "全部" }];
          var arr = oneData.concat(resData);
          this.screenObj.cityId = this.value
          this.$emit("onChangeTime", this.screenObj);
          this.$set(this, "storeArr", arr);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 改变门店选择
    onChangeStore(res) {
      var self = this;
      var screenObj = self.screenObj;
      screenObj.store.id = res;
      this.storeArr.forEach(item => {
        if (res === item.id) {
          screenObj.store.name = item.name;
        }
      });
      screenObj.cityId = this.value
      this.$set(self, "screenObj", screenObj);
      this.$emit("onChangeTime", screenObj);
    },
    cityChange() {
      this.storeDefault = "";
      this.screenObj.store.name = "全部";
      this.screenObj.store.id = "";
      this.fetchData();
    },
    // 改变区域触发事件{}
    onChangeArea(res) {
      this.areaArr.forEach(item => {
        if (res === item.id) {
          this.screenObj.area.name = item.name;
          this.screenObj.area.id = res;
        }
      });
      this.storeDefault = "";
      this.screenObj.store.name = "全部";
      this.screenObj.store.id = "";
      this.fetchStore();
    },
    // 获取区域
    async fetchData() {
      try {
        var params = {
          cityId: this.value
        }
        var res = await GetAllArea(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          var addData = [{ id: "", name: "全部" }];
          this.areaArr = addData.concat(resData);
          // 初始化时间、城市
          this.screenObj.city.name = "洛阳";
          this.screenObj.city.id = "";
          this.screenObj.area.name = "全部";
          this.screenObj.area.id = "";
          this.screenObj.store.name = "全部";
          this.screenObj.store.id = "";
          this.screenObj.gTime[0] = "2018-1-1";
          this.screenObj.gTime[1] = this.$utils.parseTime(new Date());
          var gTime = [this.$utils.formateDate("2018-1-1"), new Date()];
          this.$set(this, "gTime", gTime);
          this.screenObj.cityId = this.value
          this.$emit("onChangeTime", this.screenObj);
        }
      } catch (e) {
        console.log(e);
      }
    },

    changeTime(res) {
      var screenObj = this.screenObj;
      screenObj.gTime[0] = this.$utils.parseTime(res[0]);
      screenObj.gTime[1] = this.$utils.parseTime(res[1]);
      screenObj.cityId = this.value
      this.$set(this, "screenObj", screenObj);
      this.$emit("onChangeTime", screenObj);
    }
  }
};
</script>
<style>
@import "../../styles/element-ui/select.css";
@import "../../styles/element-ui/date/dateScope.css";
</style>

